<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>04-待办列表.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        background-color: #ccc;
      }

      ul {
        list-style: none;
      }

      li {
        padding: 20px;
        text-align: left;
        font-size: 30px;
        border-bottom: 1px dashed #ccc;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      li input {
        margin-right: 10px;
      }

      li button {
        display: none;
        padding: 5px;
      }

      li:hover button {
        display: inline-block;
        cursor: pointer;
      }

      .chk:checked + span {
        text-decoration: line-through;
      }

      h1 {
        margin-bottom: 10px;
      }

      .chk + span {
      }

      .box {
        background-color: #fff;
        width: 60vw;
        padding: 20px 20px 0;
        margin: 50px auto;
      }

      .box .tool input {
        width: 100%;
        height: 50px;
        text-indent: 20px;
        font-size: 20px;
        font-style: italic;
        color: #666;
        font-weight: 700;
      }

      section {
        height: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      a {
        text-decoration-color: #666;
        color: inherit;
      }
    </style>
  </head>

  <body>
    <div id="app" data-v-app="">
      <div class="box">
        <h1>待办列表</h1>
        <div class="tool">
          <input
            id="word"
            autofocus=""
            type="text"
            placeholder="请输入代办事项"
          />
        </div>
        <ul>
          <!-- <li>
            <div>
              <input type="checkbox"/>
              <span class="false">111</span>
            </div>
            <button id="">X</button>
          </li> -->
        </ul>
        <section>
          <span><i>1</i> 未完成</span><a href="#">清理 <b>0</b> 已完成</a>
        </section>
      </div>
    </div>
    <script>
      // 获取本地数据
      let list = JSON.parse(localStorage.getItem("list")) || [];
      // 获取元素
      const ul = document.querySelector("ul");
      // 渲染函数
      function render() {
        let finishNum = 0;
        let unFibishNum = 0;
        const arr = list.map((item, index) => {
          if (item.state) {
            finishNum++;
          } else {
            unFibishNum++;
          }
          return `<li>
            <div>
              <input class="chk" data-id="${index}" type="checkbox" ${
            item.state ? "checked" : ""
          }/>
              <span class="false">${item.word}</span>
            </div>
            <button id="${index}">X</button>
          </li>  `;
        });
        ul.innerHTML = arr.join("");
        document.querySelector(
          "section span"
        ).innerHTML = `${unFibishNum}条 未完成`;
        document.querySelector("section b").innerHTML = finishNum;
      }
      // 初始渲染
      render();
      //1、 添加事项
      // 1.1、获取元素
      const word = document.querySelector("#word");
      // 1.2、注册事件
      word.addEventListener("change", (e) => {
        // 更新数据
        list.unshift({ word: word.value, state: false });
        localStorage.setItem("list", JSON.stringify(list));
        // 渲染
        render();
      });

      // 2.事件委托注册事件
      ul.addEventListener("click", (e) => {
        // 删除事件
        del(e);
        // 完成事件
        finish(e);
      });
      function del(e) {
        if (e.target.tagName === "BUTTON") {
          // 删除数据
          list.splice(e.target.id, 1);
          // 更新本地数据
          localStorage.setItem("list", JSON.stringify(list));
          // x渲染数据
          render();
        }
      }
      function finish(e) {
        if (e.target.tagName === "INPUT") {
          // console.log(e.target.dataset.id);
          list[e.target.dataset.id].state = e.target.checked;
          // 更新本地数据
          localStorage.setItem("list", JSON.stringify(list));
          // x渲染数据
          render();
        }
      }
      // 3、清理所有完成的
      // 获取元素
      const a = document.querySelector("section a ");
      a.addEventListener("click", (e) => {
        e.preventDefault;
        const newArr = list.map((item, index) => {
          if (item.state === false) {
            return item;
          }
        });

        localStorage.setItem("list", JSON.stringify(newArr));
        render();
      });
    </script>
  </body>
</html>
